<template>
	<el-card class="!border-none mb-4" shadow="never">
		<el-form class="mt-4 w-[420px]" label-width="90px">
			<el-form-item label="客服标题：">
				<el-input v-model="formData.title" placeholder="请输入客服标题" />
			</el-form-item>
			<el-form-item label="服务时间：">
				<el-input v-model="formData.date_time" placeholder="请输入服务时间" />
			</el-form-item>
			<el-form-item label="联系电话：">
				<el-input v-model="formData.mobile" placeholder="请输入联系电话" />
			</el-form-item>
			<el-form-item label="联系QQ：">
				<el-input v-model="formData.qq" placeholder="请输入联系QQ" />
			</el-form-item>
			<el-form-item label="二维码：">
				<div>
					<imageUpload v-model="formData.qr_code" promptText="建议尺寸：400*400" :limit="1" />
				</div>
			</el-form-item>
		</el-form>
		<footerSubmit>
			<el-button v-auth="'decoration/pc/service'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</el-card>
</template>

<script setup lang="ts" name="pcService">
import { reactive, onMounted } from 'vue';
import { diyGetServicePage, diySetServicePage } from '/@/api/diy';
import { messageSuccess } from '/@/utils/message';

const formData = reactive({
	title: '',
	date_time: '',
	mobile: '',
	qq: '',
	qr_code: '',
});

const getData = async () => {
	const data = await diyGetServicePage({ type: 2 });
	if (data.data) {
		for (const key in formData) {
			if (data.data[key] != null && data.data[key] != undefined) {
				formData[key] = data.data[key];
			}
		}
	}
};

// 保存提交
const handleSubmit = async () => {
	await diySetServicePage({ type: 2, data: formData });
	messageSuccess('设置成功');
};

onMounted(() => {
	getData();
});
</script>

<style scoped lang="scss"></style>
